<template>
  <view class="appeal-module">
    <u-navbar :title="title" bgColor="#ffffff" titleStyle="font-size: 32rpx;font-weight: 500;color: #000000;" placeholder
      :autoBack="false" @leftClick="leftClick(urlIndex)">
    </u-navbar>
    <view class="order-no">
      <view class="title">{{ $t('order.Order-NO.') }}</view>
      <view class="no">{{ orderInfo.orderNo }}</view>
    </view>
    <!-- 买家发起申诉 -->
    <view class="reason" v-if="status != 1">
      <view class="title" style="margin-bottom: 30upx; margin-left: 18upx">{{ $t('order.Reason-for-appeal') }}</view>
      <u-textarea v-model="Reason" :disabled="status == 3" :placeholder="$t('order.order-tips')"
        class="textarea"></u-textarea>
    </view>
    <view class="reason">
      <view class="title" style="margin-bottom: 30upx">{{ $t('order.upload-certificate') }}<span class="number">
          ({{ fileList1.length }}/3)</span></view>
      <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :deletable="status != 3"
        :disabled="status == 3" multiple :maxCount="3" width="100" height="100">
        <image src="@/static/image/bourse/appeal.png" class="appeal-img" v-show="status != 3" />
      </u-upload>
    </view>
    <view class="footer-wrap">
      <view class="button-wrap" v-if="status == 1">
        <view class="submit" @click="uploadCertificate">{{ $t('index.Submit') }}</view>
      </view>
      <view class="button-wrap" v-if="status == 2">
        <view class="submit" @click="handleAppeal">{{ $t('order.appeal') }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import config from "@/config/app.config";
import store from "@/store/index";
import {
  exchangeOrderDetail,
  submitsCertificateB,
  releaseOrderComplaint,
} from "@/services/bourse";
export default {
  name: "OrderAppeal",
  data() {
    return {
      Reason: "",
      title: "",
      fileList1: [],
      orderId: "",
      orderInfo: {},
      applyFileJson: [],
      status: 1, //1上传凭证 ， 2申诉 3 查看详情
      tradeId: "",
      urlIndex: "OrderAppeal"
    };
  },
  methods: {
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
      this.applyFileJson.splice(event.index, 1);
    },
    //读取获取之后的信息
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: this.$t('order.uploading'),
        });
      });
      console.log(lists, "图片对象");
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        console.log(item, "xuneux");
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    //上传路径
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: config.server + "/app/oss/upload", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          header: {
            Authorization: `Bearer ${store.state.token}`,
            version: config.version,
          },
          formData: {
            user: "upload",
          },
          success: (res) => {
            const resp = JSON.parse(res.data);
            // console.log(resp, 'resp');
            this.applyFileJson.push(resp.data.url);
            setTimeout(() => {
              resolve(resp.data);
            }, 1000);
          },
        });
      });
    },
    // 订单详情
    async getDetail() {
      const resp = await exchangeOrderDetail(this.orderId);
      if (!resp.success) return;
      const orderInfo = {
        ...resp.result.data,
      };
      // 回填申诉详情
      if (this.status == 3) {
        this.fileList1 = orderInfo.complaintFileJosn.split(",").map((item) => {
          return {
            url: item,
          };
        });
        this.Reason = orderInfo.complaintMsg;
      }
      this.orderInfo = orderInfo;
    },
    // 上传凭证
    async uploadCertificate() {
      if (this.fileList1.length == 0) {
        uni.showToast({
          title: this.$t('dating.uploadVoucher') ,
          icon:'none'
        });
        return;
      }
      console.log(this.fileList1);
      const options = {
        orderId: this.orderId,
        tradeId: this.tradeId
      }
      if (this.applyFileJson.length > 0) {
        options.applyFileJson = this.applyFileJson.join(",")
      }
      const resp = await submitsCertificateB({ ...options });
      if (!resp.success) return;
      uni.showToast({
        title: this.$t("index.operation-success"),
        icon: "none",
        duration: 1500,
      });
      setTimeout(() => {
        this.leftClick(this.urlIndex)
        // uni.navigateBack();
      }, 800);
    },
    // 发起申诉
    async handleAppeal() {
      if (this.fileList1.length == 0) {
        uni.showToast({
          title: this.$t('dating.uploadVoucher') ,
          icon:'none'
        });
        return;
      }
      const resp = await releaseOrderComplaint({
        orderId: this.orderId,
        complaintMsg: this.Reason,
        complaintFileJosn: this.applyFileJson.join(","),
      });
      if (!resp.success) return;
      uni.showToast({
        title: this.$t("index.operation-success"),
        icon: "none",
        duration: 1500,
      });
      setTimeout(() => {
        this.leftClick(this.urlIndex)
        // uni.navigateBack();
      }, 800);
    },
    initTitle() {
      switch (this.status) {
        case '1':
          this.title = this.$t('order.Already-paid');
          break;
        case '2':
          this.title = this.$t('order.appeal');
          break;
        case '3':
          this.title = this.$t('order.Appeal-Details');;
          break;
        default:
          break;
      }
    },
  },
  onShow() { },
  onLoad(options) {
    this.getPrePages(this.urlIndex) // 获取上一个页面的路径已经参数
    console.log(options, '1');
    if (options.orderId) {
      this.orderId = options.orderId;
    }
    if (options.tradeId) {
      this.tradeId = options.tradeId;
    }
    if (this.status) {
      this.status = options.status;
      this.initTitle()
    }
    this.getDetail();
  },
};
</script>

<style lang="scss" scoped>
.appeal-module {
  padding: 30upx;
  box-sizing: border-box;

  .order-no {
    padding: 36upx 20upx;
    background: #ffffff;
    border-radius: 20upx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .no {
      font-size: 28upx;
      font-weight: 400;
      color: #878787;
    }
  }

  .title {
    font-size: 28upx;
    font-weight: 400;
    color: #000000;
  }

  .reason {
    padding: 36upx 20upx;
    background: #ffffff;
    border-radius: 20upx;
    margin-top: 30upx;
  }

  .number {
    font-size: 28upx;
    font-weight: 400;
    color: #878787;
  }

  .appeal-img {
    width: 196upx;
    height: 196upx;
  }

  .btn {
    position: fixed;
    bottom: 60upx;
    font-size: 28upx;
    width: 90%;
    font-weight: 500;
    height: 90upx;
    color: #ffffff;
    background: #61bdb2;
    border-radius: 80upx;
    text-align: center;
    line-height: 90upx;
  }
}

.footer-wrap {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  .button-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10rpx 30rpx;

    .submit {
      padding: 0 296rpx;
      height: 80rpx;
      background: #61bdb2;
      border-radius: 64rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
      line-height: 80rpx;
    }
  }
}

/deep/ .u-border {
  border: none;
}
</style>